<!-- 左侧导航组件 -->
<!-- 使用说明：<side-bar></side-bar> -->
<template>
    <div id="sidebar-wrap" class="sb-container">
      <el-scrollbar wrap-class="scrollbar-wrapper" >
        <el-tree ref="tree"
                 :data="data"
                 @node-click="handleNodeClick"
                 node-key="id"
                 show-checkbox
                 :default-checked-keys="checkedKey"
                 :default-expanded-keys="expandedKey">
        </el-tree>
      </el-scrollbar>
    </div>
</template>
<script>
  import {disableBtn, df, $err, $suc, ERRS, SUCS} from '@/utils'
  import {fetchGet, createOne, deleteOne, deletePost, getOne, rolesAll, updateOneNoId} from '@/api/common'

  export default {
    name: "supplierTree",
    data() {

      return {
        isMusicOn: false,
        isUnique: true,
        isRouter: true,
        data: [{
          label: '一级地区 1',
          children: [
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-2',
              children: [{
                label: '三级地区 1-1-3'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
            {
              label: '二级地区 1-1',
              children: [{
                label: '三级地区 1-1-1'
              }]
            },
          ]
        }, {
          label: '一级地区 2',
          children: [{
            label: '二级地区 2-1',
            children: [{
              label: '三级地区 2-1-1'
            }]
          }, {
            label: '二级地区 2-2',
            children: [{
              label: '三级地区 2-2-1'
            }]
          }]
        }, {
          label: '一级地区 3',
          children: [{
            label: '二级地区 3-1',
            children: [{
              label: '三级地区 3-1-1'
            }]
          }, {
            label: '二级地区 3-2',
            children: [{
              label: '三级地区 3-2-1'
            }]
          }]
        }],
        props1: {
          label: 'label',
          children: 'children'
        },
        expandedKey:[],
        checkedKey:[]
      };
    },
    watch:{
      //搜索框 handleSelect Promise.all 多条异步后 ,this.changeSearchData 值改变
      changeSearchData(newdata){
        console.log(8898,newdata);

        this.$set(this.expandedKey, [])   //展开重置
        this.$refs.tree.setCheckedKeys([]); //选中重置
        for (var i of newdata) {  // 1 - n级
          let node=this.$refs.tree.getNode(i.id) // node 当前级的 node
          this.$refs.tree.setCurrentNode(node);   //通过node选中当前节点
          let parentId=node.data.id

          console.log(9991,node.childNodes.length);
          if(node.childNodes.length>0){ //当前节点的子节点已加载
            console.log('80当前节点的子节点已加载 '+node.childNodes.length);
          }else{
            console.log('82当前节点没有子节点异步加载 '+node.childNodes.length);
            //寻找当前级的child数组
            let level=parseInt(node.data.level)
            let data=this.selGetData[level] //data
            console.log(7781899,node)
            console.log(29,this.selGetData)
            console.log(29,data)
            //当前级node 插入 子级
            for(let v of data){
              this.$refs.tree.append(v,node)
            }
          }

          this.$refs.tree.setChecked(parentId,true); //已有数据,通过id选中当前节点
          this.expandedKey.push(parentId) //选中的点打勾
        }
      }
    },

    // <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
    // <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>

    methods: {

      //节点点击事件
      handleNodeClick(data) {

        this.$refs.tree.setCheckedKeys([]);
        // this.$refs.tree.setCheckedKeys([data.id]); ////通过id选中当前节点及子节点
        this.$refs.tree.setChecked(data.id,true); //通过id选中当前节点
        this.$emit('sbgetList',data)
      },

    }
  }
</script>

<style  lang="scss">
  .sb-container{
    height: 100%;
    overflow: hidden;
    border: 1px solid #eaecf0;
    border-radius: 5px;
  }

  .scrollbar-wrapper {
    height: calc(100vh - 51px);
    overflow-x: hidden!important;
    .el-scrollbar__view {
      .el-tree{
        /*background: #f3f3f4;*/
        /*background: #fdf4df;*/
        border-radius: 5px;
        color: #476094;
        width: 100%;
        height: calc(100vh - 88px);

        .el-tree-node {
          .el-tree-node__content {
          }
        }
      }
    }
  }


  .el-submenu .el-tree-item {
    padding: 0 20px;
    min-width: 160px;
    padding-left: 20px !important;
    &:hover { // 美化左侧导航的留白
      background:green;
    }
  }

  // 改变元素属性，要不动画效果不管用，是不是很厉害啊？哈哈哈
  .rythm.twist1 {
    display: block;
  }
  .el-tree-node__label {
    font-size: 20px;
  }
  .el-tree-node__content {
    height: 35px!important;
  }


</style>
